<template>
  <div class="w-1/2 p-4 border">
    <div class="grid grid-cols-1 gap-4 mb-4">
      <div v-for="i in 2" class="w-full h-50px bg-[#dc9e58]">{{ i }}</div>
    </div>
    <div class="grid grid-cols-2 gap-4 mb-4">
      <div v-for="i in 3" class="w-full h-50px bg-[#4ce600]">{{ i }}</div>
    </div>
    <div
      class="grid gap-4 mb-4"
      :style="{ 'grid-template-columns': `repeat(${clo}, 1fr)` }"
    >
      <div v-for="i in 8" class="w-full h-50px bg-[#884dff]">{{ i }}</div>
    </div>
    <el-button @click="clo++">增加列</el-button>
    <el-button @click="clo=1">复原</el-button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const clo = ref(1);
</script>
<style lang="scss" scoped>
</style>
